메인 콘텐츠로 이동하기
  1. Posts/

블로그 시작하기 with Hugo & Congo

··7 분
Congo 로고
제가 선택한 것은 Hugo & Congo 입니다

블로그 시작하기 #

블로그를 처음 해봅니다.

일단 선택지가 뭐뭐 있는지부터 알아봤습니다. 처음 들어보는 이름이 대부분이었어요.

비교와 선택 과정을 조금 적어보겠습니다.

블로그 선택지 #

  • 네이버 블로그 바로가기

    쉽고 좋지만 그냥 제 도메인으로 해보고 싶었어요. 저 네이버 좋아해요.

  • Jekyll 바로가기

    용도: Ruby 기반의 정적 사이트 제너레이터로, GitHub Pages에서 많이 사용됩니다.

    장점:

    • GitHub Pages와 결합하면 무료 호스팅 가능
    • 커스터마이징(HTML 템플릿 수정)으로 AdSense 스크립트, SEO 메타태그, OG 태그 직접 삽입 가능
    • 문서와 커뮤니티가 잘 되어 있어 참고 자료가 많음

    단점:

    • 콘텐츠 업데이트 시 로컬에서 빌드 후 푸시해야 해서 약간의 개발 지식 필요
  • Astro 바로가기

    최신 정적 사이트 제너레이터로, 여러 프레임워크 컴포넌트를 결합해 빠른 사이트를 만들 수 있습니다.

    장점:

    • 빠른 빌드 속도와 높은 성능
    • 다양한 UI 프레임워크(React, Vue, Svelte 등)와 혼합 사용 가능
    • AdSense, SEO, OG 태그는 템플릿 수정으로 쉽게 추가 가능

    단점:

    • 새로운 툴이라 관련 자료가 Jekyll이나 Hugo에 비해 적을 수 있음
    • JavaScript 및 모던 프론트엔드 생태계에 익숙해야 함
  • Eleventy 바로가기

    단순하고 유연한 정적 사이트 제너레이터 (JavaScript 기반)

    장점:

    • 학습 곡선이 완만하고 커스터마이징하기 쉬움
    • 무료 호스팅(예: Netlify, Vercel, Cloudflare Pages)과 잘 맞음
    • AdSense, SEO, OG 태그 추가 가능

    단점:

    • 테마나 플러그인 생태계가 Jekyll 만큼 방대하지 않을 수 있음
    • 일부 고급 기능은 직접 구현해야 할 수도 있음
  • Hugo 바로가기

    Go 언어 기반의 정적 사이트 제너레이터. 속도가 매우 빠릅니다.

    장점:

    • 빌드 속도가 매우 빠르고 대용량 콘텐츠에도 적합함
    • 다양한 테마와 문서가 있어 SEO, OG 태그 설정이 가능한 테마도 많음
    • 무료로 운영 가능하며, GitHub Pages나 Netlify와 같이 사용할 수 있음

    단점:

    • Go 언어에 대한 지식이 없어도 사용 가능하지만, 커스터마이징 시 문법이 다소 생소할 수 있음
  • 워드프레스 바로가기

    가장 대표적인 CMS. 블로그부터 복잡한 웹사이트까지 다양하게 활용됩니다.

    장점:

    • 사용자 친화적인 인터페이스와 풍부한 플러그인(예: Yoast SEO, OG 설정 플러그인)
    • AdSense, 기타 광고 관리도 플러그인으로 쉽게 지원
    • 한글 지원 및 다양한 테마가 있어 SEO 최적화와 디자인 커스터마이징에 용이함

    단점:

    • WordPress.com의 무료 플랜은 커스터마이징(광고 삽입 등)에 제한이 있을 수 있음
    • WordPress.org(자체 호스팅)로 사용하려면 별도의 서버 비용(무료 옵션도 있지만 제한적)이 발생할 수 있음
    • 보안과 업데이트 관리에 신경 써야 함
  • 옵시디언 바로가기

    원래 개인 지식 관리(노트테이킹) 툴인데, 최근에는 플러그인을 이용해 정적 웹사이트나 블로그로 변환도 된다고 합니다.

    장점:

    • 로컬 파일 기반이라 데이터 소유권이 확실함
    • 마크다운 작성이 편리함

    단점:

    • 전용 블로그 플랫폼이 아니어서 커스터마이징(예: AdSense 코드 삽입)이나 SEO, OG 설정이 기본적으로 지원되지 않을 수 있음
    • 추가 플러그인이나 별도 툴이 필요해서 초보자가 바로 사용하기엔 약간 복잡할 수 있음
  • 블로그 스팟 바로가기

    Blogger, 구글 블로그, 블로그스팟 같은 말인 거 같아요.
    구글에서 직접 운영하는 무료 블로그 플랫폼으로, 기본적으로 애드센스와 연동하기가 매우 수월해요. 구글 애널리틱스, 서치콘솔 등 다른 구글 서비스와의 연동도 자연스럽게 이루어지기 때문에 SEO 최적화 측면에서도 유리합니다.

    장점:

    • 무료 사용: 별도의 비용 없이 쉽게 시작할 수 있음
    • 애드센스 승인 용이: 구글 서비스끼리 연동되어 있기 때문에 애드센스 승인 절차가 다른 플랫폼보다 간단한 편
    • 구글 서비스 연동: 검색엔진 최적화 및 데이터 분석에 도움이 되는 도구들과 쉽게 연결됨

    단점:

    • 커스터마이징 한계: 디자인이나 기능을 직접 커스터마이징하는 데에는 제약이 있을 수 있음
    • 템플릿 선택 폭: 다른 SSG나 CMS에 비해 제공되는 테마나 플러그인이 제한적일 수 있음
  • Ghost 바로가기

    오픈소스 기반의 퍼블리싱 플랫폼으로, 모던한 디자인과 빠른 성능이 특징입니다. SEO와 콘텐츠 전반에 집중할 수 있도록 깔끔한 인터페이스를 제공합니다.

    장점:

    • 경량성과 속도: 워드프레스보다 빌드 속도도 빠르고, 불필요한 기능이 적어 깔끔함
    • 커스터마이징: 코드 수정이 가능해 원하는 대로 템플릿을 조정하고, 애드센스 스크립트를 삽입할 수 있음
    • 전문성: 콘텐츠에 집중하고자 하는 분들에게 적합한 플랫폼

    단점:

    • 자체 호스팅 필요: 무료 소프트웨어이긴 하나, 별도의 서버나 호스팅 비용이 발생할 수 있음
    • 설정 난이도: 초보자에게는 설정 및 유지 관리가 다소 복잡할 수 있음

그 외에도 너무 많은 선택지 가 있었습니다.

Quartz
티스토리 (Tistory)
Wix
Weebly
Squarespace

배포/호스팅 #

작성은 좋은데 개인 도메인을 가져보고 싶었어요. 가급적이면 도메인 비용 외에는 비용을 들이고 싶지 않았고요.

  • Vercel 바로가기

    Next.js 등 JS 기반 정적/동적 사이트 배포 플랫폼입니다.

    장점:

    • Next.js, Astro 등 다양한 프레임워크와 호환
    • 무료 플랜에서 간편한 배포 및 서버리스 함수 지원
    • HTML 템플릿 수정으로 AdSense, SEO, OG 태그 적용 가능

    단점:

    • 프론트엔드 프레임워크에 익숙하지 않으면 초기 진입 장벽이 있을 수 있음
    • 동적 기능과 정적 사이트의 구분을 명확히 해야 함
  • Cloudflare Pages 바로가기

    Cloudflare의 정적 사이트 호스팅 서비스. 다양한 SSG (Jekyll, Hugo, Eleventy, Astro 등)와 호환됩니다.

    • 무료 플랜에서 빠른 CDN 제공
    • Git 기반 배포로 자동 빌드 지원
  • Netlify 바로가기
    • 자동 빌드 및 배포: GitHub, GitLab, Bitbucket 같은 버전 관리 서비스와 연동해서 코드를 푸시하면, Netlify가 자동으로 사이트를 빌드(생성)하고 CDN을 통해 전 세계에 배포해줄 수 있습니다. 그래서 업데이트할 때마다 수동으로 서버에 업로드할 필요가 없어요.
    • 무료 플랜 가능
    • 특히 정적 사이트 제너레이터(Jekyll, Hugo, Eleventy, Astro 등)와 잘 어울리기 때문에, 개발자들이 간단한 블로그나 포트폴리오, 혹은 기술 문서 사이트를 제작할 때 많이 사용합니다.
  • GitHub Pages 바로가기
    • 무료 사용 가능

도메인 #

실제로 도메인을 구입해본 것도 처음이었어요. 이건 생각보다 쉬웠습니다.
꼭 필요하다 싶었던 부분은 등록정보를 보호해주는 기능이었고, 그 다음은 가격을 최우선으로 했습니다.

또, 첫 해는 저렴하지만 갱신 비용은 갑자기 비싸지는 경우도 있습니다.

선택, 요구사항, 그리고 해야할 것 #

위에 있는 것중에 제가 선택한 것은 다음과 같습니다.

  • Hugo
    • Congo1 테마
  • Cloudflare Pages

일단 사이트가 빨랐으면 했어요. 그리고 최대한 비용을 덜 들이고 싶었고요. 어느 정도 커스텀도 가능했으면 했고요.

그런데 제가 원하는 부분은 결국 기본적인 개발 지식을 필요로 하더라고요. 더듬더듬 알고있는 개발 지식으로 며칠 고생해서 블로그를 내놓게 되었습니다.

하는 김에 원래 있는 가이드 문서를 조금 수정과 번역해서 같이 내놓아 봤습니다.

요구사항 #

개발 지식이 조금 필요해요.

Hugo 설치 같은 부분은 가이드 문서대로 하면 되지만, 예를 들어, Git2을 통해 소스 코드를 관리하고 GitHub3에 배포하는 부분은 따로 가이드되어 있지 않아요.

  • Git
  • GitHub
  • Markdown 문법을 사용해서 글을 작성합니다. 기본적인 사용법은 가이드 문서 마크다운에도 있습니다. Bear 라는 어플을 통해서 더 쉽게 작성하실 수도 있습니다.

Hugo, Congo 샘플 및 가이드 문서 #

대부분은 간단한 번역 위주입니다만 다음과 같은 작업을 추가로 진행했습니다.

  1. 영문 링크 유지
  2. 개인 설정 파일 내용으로 대체
  3. 일부 단어가 마땅하지 않은 것은 의역
  4. 추가 이미지
  5. 사족

저는 topic 으로 구성해봤어요. 아래 링크의 문서들이 도움이 되었으면 합니다.

개인 코드나 사족이 있기도 하고 추가한 이미지도 있어, 원래의 커뮤니티에서 번역 작업 PR을 하지는 않았습니다.

해야할 것 #

해야할 게 많네요. 당장 생각나는 것은 이래요.

  • 로고 이미지 등 만들기 완료
  • 새 글 표시 기능 자동으로 표시되게 하기 완료
  • Google Analytics 설정해서 방문자 통계 확인해보기 완료
  • Google Search Console 연동으로 구글 검색에 나오게 하기 완료
  • Naver Webmaster 완료
  • Bing Webmaster 완료
  • Daum Webmaster 완료

일단 시작해보겠습니다. 정 안되는 것은 그냥 포기하겠습니다.

쫄보라 공격받는 걸 많이 무서워합니다. 익숙해질때까지 댓글같은 커뮤니케이션 기능은 닫아두겠습니다.

  1. Hugo의 테마 중 하나입니다. Congo 테마 페이지에서 원래의 문서를 확인하실 수 있습니다. 😍 ↩︎

  2. 소스 코드 관리 툴. 버전 관리 툴입니다. ↩︎

  3. 소스 코드 저장소 플랫폼. 소스 코드를 저장하고 관리하는 플랫폼입니다. Microsoft 소유. ↩︎

헤픈애
글쓴이
헤픈애
평범한 일상을 꿈꾸는 헤픈애